<template>
  <div id="app">
    <div class="title">
      Dynamic Actual v.Forecast Expense Analysis
    </div>
    <div class="des">
      <div class="one brand">
        
      </div>
      <div class="two">
        <div class="desText">Actuals</div>
        <div class="desText">434.4M</div>
      </div>
      <div class="two">
        <div class="desText">Forecast</div>
        <div class="desText">371.4M</div>
      </div>
      <div class="two">
        <div class="desText">Fav/(Unfav)$</div>
        <div class="desText">(62.74M)</div>
      </div>
      <div class="two">
        <div class="desText">Fav/(Unfav)%</div>
        <div class="desText">(16.9%)</div>
      </div>
      <div class="one">
        <!-- <button class="btn">EmailLink</button> -->
      </div>
    </div>
    <div class="container">
      <div class="itemContainer">
        <!-- <div style="text-align:left;margin-left: 20px;">
          Expense Type
        </div> -->
        <ve-bar :data="chartData1" ></ve-bar>
      </div>

      <div class="itemContainer">
        <div style="text-align:left;margin-left: 20px;">
          Trended Actual v.Forecast
        </div>
        <ve-histogram :data="chartData2"></ve-histogram>
      </div>
    </div>
    <div class="container">
      <div class="itemContainer">
       
        <ve-waterfall :data="chartData" ></ve-waterfall>
      </div>

      <div class="itemContainer">
        <div style="text-align:left;margin-left: 20px;margin-top: 20px;">
          Trended Actual v.Forecast Explanation
          
          <button class="updateBtn" v-if="!showInput">Email</button>

          <button class="updateBtn" v-if="showInput" @click="showInput=false;">Save</button>

          <button class="updateBtn" v-if="showInput" @click="showInput=false;">Cancel</button>

          <button class="updateBtn" v-if="!showInput" @click="showInput=true;">Update</button>
        </div>

         <div class="defaultText" v-if="!showInput">
            <div>.Actuals (Mill) and Forecast (Mill) moved in opposite durections from Jan 18 to Dec 18, with Actuals(Mill) rising by 74% and Forecast (Mill) falling by 277%.</div>
            <div>.Actuals (Mill) trended upward in the final period.On the other hand. Forecast (Mill) trended downward.</div>
            <div>.Of note, Forecast (Mill) <span style="color:red;">fell over two consecutive periods</span> from Oct 18 to Dec 18(-53.52), outpacing the overall change across the entire series.</div>
            <div>.Whereas Forecast (Mill) decreased (from Oct 18 to Dec 18), Actuals (Mill) actually increased.</div>
            <div>.Actuals (Mill) was higher than Forecast (Mill) over the entire series, higher bt 19.7 on average.</div>
          </div>
          <textarea type="text" class="textInput" v-if="showInput">
            .Actuals (Mill) and Forecast (Mill) moved in opposite durections from Jan 18 to Dec 18, with Actuals(Mill) rising by 74% and Forecast (Mill) falling by 277%.
            .Actuals (Mill) trended upward in the final period.On the other hand. Forecast (Mill) trended downward.
            .Of note, Forecast (Mill) fell over two consecutive periods from Oct 18 to Dec 18(-53.52), outpacing the overall change across the entire series.
            .Whereas Forecast (Mill) decreased (from Oct 18 to Dec 18), Actuals (Mill) actually increased.
            .Actuals (Mill) was higher than Forecast (Mill) over the entire series, higher bt 19.7 on average.
          </textarea>
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data () {
    return {
      showInput: false
    }
  },
  components: {
    HelloWorld
  },
  created() {
     this.chartData = {
      columns: ['type','Amount' ],
          rows: [
            { 'type': 'Capital Opportunities', 'Amount': 0 },
            { 'type': 'Capital Solutions', 'Amount': 0 },
            { 'type': 'Credit Liquidity', 'Amount': 0 },
            { 'type': 'Customized Credit Strategies', 'Amount':200 },
            { 'type': 'Distressed', 'Amount': 0 },
            { 'type': 'Global', 'Amount': 0 },
            { 'type': 'Global-Corporate', 'Amount': 0 },
            { 'type': 'Hedge Fund Strategies', 'Amount': 0 },
            { 'type': 'Budget', 'Amount': 400 }
          ]
    };

    this.chartData2 = {
          columns: ['日期', 'Actuals(Mill)', 'Forecast(Mill)'],
          rows: [
            { '日期': 'Jan 18', 'Actuals(Mill)': '30', 'Forecast(Mill)': '20'},
            { '日期': 'Feb 18', 'Actuals(Mill)': '65', 'Forecast(Mill)': '54' },
            { '日期': 'Mar 18', 'Actuals(Mill)': '35', 'Forecast(Mill)': '25' },
            { '日期': 'Apr 18', 'Actuals(Mill)': '25', 'Forecast(Mill)': '16' },
            { '日期': 'May 18', 'Actuals(Mill)': '35', 'Forecast(Mill)': '20' },
            { '日期': 'Jun 18', 'Actuals(Mill)': '36', 'Forecast(Mill)': '21' },
            { '日期': 'Jul 18', 'Actuals(Mill)': '33', 'Forecast(Mill)': '17'},
            { '日期': 'Aug 18', 'Actuals(Mill)': '48', 'Forecast(Mill)': '26' },
            { '日期': 'Sep 18', 'Actuals(Mill)': '20', 'Forecast(Mill)': '2' },
            { '日期': 'Oct 18', 'Actuals(Mill)': '35', 'Forecast(Mill)': '23' },
            { '日期': 'Nov 18', 'Actuals(Mill)': '22', 'Forecast(Mill)': '10' },
            { '日期': 'Dec 18', 'Actuals(Mill)': '53', 'Forecast(Mill)': '36' }
          ]
        };

        this.chartData1 = {
          columns: ['Expense Type', 'Actuals'],
          rows: [
            { 'Expense Type': 'Occupancy and Equipment', 'Actuals': 16.3 },
            { 'Expense Type': 'Business Develompment', 'Actuals': 26.5 },
            { 'Expense Type': 'Professional Fees', 'Actuals': 28.0 },
            { 'Expense Type': 'Other Op Expense Summation', 'Actuals': 33.3 },
            { 'Expense Type': 'Other Op Expense Summation', 'Actuals': 33.3 },
            { 'Expense Type': 'Dereciation and Amortization', 'Actuals': 67.3 },
            { 'Expense Type': 'General Administrative', 'Actuals': 251.3 },
            
          ]
        }

  }
}
</script>

<style>
html{
  background: #fff;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  margin: 0px;
  background: #fff;
  padding: 0px;
  height: 100%;
  width: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  
}

.title{
  background: #4879A6;
  color: #fff;
  height: 40px;
  text-align: left;
  font-size: 18px;
  line-height: 40px;
  padding-left: 20px;
}

.des{
  height: 40px;
  margin-bottom: 10px;
}

.one{
  width: 30%;
  float: left;
}

.brand{
  font-size: 18px;
  color:red;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
.btn{
  background: #7BA945;
  color: #fff;
  height: 30px;
  margin: 2px;
  width: 100px;
  float: right;
  margin-right: 20px;
}

.two{
  width: 10%;
  float: left;
  height: 40px;
}

.desText{
  height: 20px;
  line-height: 20px;
  font-size: 13px;
}

.container{
    width: calc(100% - 30px);
    height: 100%;
}

.itemContainer{
    width: 50%;
    float: left;
}

.updateBtn{
  float: right;
  border: 0;
  font-size: 15px;
  margin-right: 10%;
}


.defaultText{
  margin-top: 20px;
  border: 1px solid #aeaeae;
  padding: 10px;
  text-align: left;
}

.textInput{
  color: #888;
  width: 80%;
  height: 250px;
  margin: 20px;
  font-size: 16px;
}
</style>
